<template>
  <div class="about">
    <!--<Loading></Loading>-->
    <div class="box"></div>

    <!--<div v-loading="!(list && list.length > 0)" class="container"></div>-->
    <div v-loading="true" class="container"></div>
  </div>
</template>

<script>
// import Loading from '@/components/Loading'
import useLoading from '@/components/base/use-loading'

export default {
  components: {
    // Loading,
  },
  data () {
    return {
      list: [],
      loading: true,
      color: '#5dc596',
      size: '15px',
      height: '200px',
      width: '200px',
      loadingInstance: null
    }
  },
  mounted () {
    console.log('loading......')
    const loadingInstance = useLoading()
    this.loadingInstance = loadingInstance
    setTimeout(() => {
      this.list.push(...'string')
    }, 10000)
  },
  watch: {
    // 这里不能使用箭头函数来定义watcher函数
    list: function (val, oldVal) {
      if (val && val.length > 0) {
        console.log('has close loading')
        this.loadingInstance.close()
      }
    }
  }
}
</script>

<style lang="less" scoped>

.about {
  position: relative;

  .box {
    margin: 200px auto 0;
    width: 200px;
    height: 200px;
    background-color: #e4e4e4;
  }

  .container {
    margin: 50px auto;
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
}

</style>
